<template>
  <div>
    <el-row align="middle" class="pt-20">
      <el-col :span="16">
        <p class="main_title">{{ $t('menu.LOG') }}</p>
      </el-col>
    </el-row>
    <div style="display: flex; margin: 15px;0;15px;0">
      <div style="flex: 0 0 70%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <el-row class="search_block pt-20">
          <el-col :span="8">
            <el-input placeholder="请输入查询条件" v-model="searchData.term" class="input-with-select" clearable @change="doList">
              <el-button slot="append" icon="el-icon-search" @click="doList">查询</el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="table_container">
      <el-table :data="logs" :header-cell-style="boxheader" style="width: 100%">
        <el-table-column min-width="20px" align="center" :label="$t('log.ID')">
          <template slot-scope="scope">
            <span>{{ scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="50px" align="center" label="模块">
          <template slot-scope="scope">
            <span>{{ scope.row.type}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="info" min-width="50px" align="center" label="操作">
        </el-table-column>
        <el-table-column prop="params" min-width="100px" align="center" label="参数" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column min-width="50px" align="center" :label="$t('log.RESULT')">
          <template slot-scope="scope">
            <span v-if="scope.row.result === 0">成功</span>
            <el-tag type="danger" effect="dark" v-if="scope.row.result !== 0">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="50px" align="center" label="错误码">
          <template slot-scope="scope">
            <span v-if="scope.row.result !== 0">{{scope.row.result}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="50px" align="center" :label="$t('log.ADDUSER')">
          <template slot-scope="scope">
            <span>{{ scope.row.loginname}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="80px" align="center" :label="$t('log.ADDTIME')">
          <template slot-scope="scope">
            <span>{{ scope.row.addtime}}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="col-sm pt-3 text-sm-left" style="text-align:right; display: contents">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.curpage" :page-sizes="[5, 10, 20, 50]"
          :page-size="searchData.pagesize" layout="total, sizes,  pager, jumper" :total="searchData.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import actionLogsService from "@/service/actionLogsService";

export default {
  name: "ActionLogsList",
  data() {
    return {
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5",
      },
      searchData: {
        term: "",
        curpage: 1,
        pagesize: 10,
        total: 0,
      },
      logs: [],
    };
  },
  watch: {},
  mounted: function () {
    // commit('SET_ACTIVE', 6)
    this.$store.dispatch("setActive", "6").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
    // localStorage.setItem('active', 6)
    actionLogsService
      .listActionLogs({ curpage: 1, pagesize: 10 })
      .then((res) => {
        if (res && res.data.result === 0) {
          this.logs = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
  },
  created() {},
  destroyed() {},
  methods: {
    /**
     * 改变分页大小
     * @param val 分页大小
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchData.pagesize = val;
      console.log(this.searchData.pagesize, "this.searchData.pagesize");
      this.listActionLogs();
    },
    /**
     * 选择页码
     * @param val 当前页码
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchData.curpage = val;
      console.log(this.searchData.curpage, "this.searchData.curpage");
      this.listActionLogs();
    },

    doList() {
      this.searchData.curpage = 1;
      this.listActionLogs();
    },

    listActionLogs() {
      actionLogsService.listActionLogs(this.searchData).then((res) => {
        if (res && res.data.result === 0) {
          this.logs = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style scoped>
</style>
